import React from 'react';
import './index.scss';

import { withRouter } from 'react-router-dom';

@withRouter
class SideMenu extends React.Component {

    state = {
        mode: 'inline',
        theme: 'light',
    };

    leafNodeClick = (item) => {
        item.active=true;
        this.props.history.push(item.url);
    }

    rendMenTree(arr) {
        return arr.map((tree) => {
            if (tree['children'] && tree['children'].length > 0) {
                return <div onClick={() => this.leafNodeClick(tree)}>
                    {tree.name}
                    {this.rendMenTree(tree.children)}
                </div>
            } else {
                return <div className="menu-item" onClick={() => this.leafNodeClick(tree)}>{tree.name}</div>
            }

        })
    }

    render() {
        return <div className="k-side-menu" >
            {
                this.rendMenTree(this.props.menuTree)
            }
        </div >
    }
}

export default SideMenu;